1-1 前端开发必备：Mock接口能力及接口测试工具
前端接口开发痛点
前后端分离后，前端开发者与接口的关系可以概括为"既爱又恨"。爱的是前端可以独立开发，恨的是接口测试、Mock 数据等关联工作太多。
前端接口开发通常经历以下阶段：
阶段一：页面假数据 → 手写假数据渲染页面
阶段二：Mock 拦截 → 拦截 HTTP 请求，返回 Mock 数据
阶段三：Mock 服务端 → 搭建真实 Mock 服务器，模拟网络延迟
阶段四：接口联调 → 与服务端接口对接，验证交互逻辑
阶段五：接口测试 → 功能测试、压测、负载测试
text
阶段一：页面假数据
最简单的方式是在页面中直接写假数据。缺点是最终需要删除这些数据，且数据量小、不够真实。
阶段二：Mock 拦截
通过拦截前端的 HTTP 请求返回 Mock 数据，既可以在页面上写接口请求，又能获取到 Mock 数据。常用工具：Mock.js。
局限性：无法模拟真实的网络延迟和异常情况。
阶段三：Mock 服务端
搭建真实的 Mock 服务器，前端发送真实的接口请求，从服务端响应数据。可以模拟网络不好、超时等场景。常用工具：json-server。
阶段四：接口功能测试
与服务端联调时，验证接口响应数据结构是否与前端需求一致。常用工具：
| 工具 | 类型 | 说明 |
|---|---|---|
| Postman | 桌面端/Web | 最流行的接口测试工具 |
| REST Client | VS Code 插件 | 轻量级，在编辑器内测试 |
| Apifox | 桌面端 | 国产，集成接口文档和测试 |
阶段五：服务端接口测试
服务端的接口测试包括单元测试、压力测试、负载测试、冒烟测试等。常用工具：JMeter。
本周学习路线
| 章节 | 主题 | 核心工具 |
|---|---|---|
| 第 1 章 | Mock 数据生成与拦截 | Mock.js、json-server |
| 第 2 章 | 接口测试综合工具 | Postman、VS Code 插件 |
| 第 3 章 | 接口压测与负载测试 | JMeter |
参考资源
- Mock.js 官方文档 - 假数据生成
- json-server 官方文档 - Mock 服务器
- Postman 官方网站 - 接口测试
↑